import { Button } from "antd";
import './index.scss'
const FilterToolBar = (props) => {
  const btnGroup = props.btnGroup || [
    [],
    [
      { text: '查询', type: 'primary', action: 'handleSearch' },
      { text: '重置', type: 'default', action: 'handleReset' },
    ]
  ];
  const leftBtnGroup = btnGroup[0];
  const rightBtnGroup = btnGroup[1];
  const handleBtnClick = (btn) => {
    const { action } = btn;
    try {
      props[action]();
    } catch (error) {
      console.error(`${action} is not a function or it is undefined: ${error}`);
    }
  }
  return (
    <div className="filter-tool-bar">
      <div className="left">
        { leftBtnGroup.map(item => {
          return <Button key={item.action} type={item.type} danger={item.danger} onClick={e => handleBtnClick(item)}>{item.text}</Button>
        }) }
      </div>
      <div className="right">
        { rightBtnGroup.map(item => {
          return <Button key={item.action} type={item.type} danger={item.danger} onClick={e => handleBtnClick(item)}>{item.text}</Button>
        }) }
      </div>
    </div>
  )
};

export default FilterToolBar;
